<template>
  <div class="upload" v-loading="loading">
    <el-upload
      class="upload-demo"
      drag
      :on-preview="handelPreview"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :file-list="fileList"
      :auto-upload="false"
      action=""
      multiple
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <!-- <div class="el-upload__tip" slot="tip">
        只能上传jpg/png文件，且不超过500kb
      </div> -->
    </el-upload>
    <div class="btn">
      <el-button size="medium" type="primary" @click="upLoadJava">上传</el-button>
      <el-button size="medium" @click="$emit('func')">取消</el-button>
    </div>
  </div>
</template>
<script>
import { uploadDocs, uploadDocsJava } from "@/api/KnowledgeBaseManagement";
import { downLoad, delay } from "@/utils/index";
export default {
  components: {},
  props: {
    userknowledge: {
      type: String,
      default: "",
    },
    userknowId: {
      type: Number,
      default: "",
    },
  },
  data() {
    return {
      echartsOption: {},
      fileList: [],
      loading: false,
      fileTypeArr: ["docx", "pdf", "txt"],
    };
  },
  mounted() {
    // console.log(this.userknowledge, "this.userknowledgethis.userknowledgethis.userknowledge");
  },
  methods: {
    upLoad() {
      this.loading = true;
      // this.upLoadJava();
      let formatData = new FormData();
      console.log(this.fileList);
      this.fileList.forEach((item) => {
        formatData.append("files", item.raw);
      });
      formatData.append("knowledge_base_name", this.userknowledge);
      uploadDocs(formatData)
        .then((result) => {
          console.log(result);
          if (result.code == 200) {
            this.upLoadJava();
          }
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },
    upLoadJava() {
      if (!this.fileList) {
        this.$message.warning("请先选择文件");
        return;
      }
      let formatData = new FormData();
      console.log(this.fileList);
      let bool = false;
      this.fileList.forEach((item) => {
        if (this.fileTypeArr.includes(item.name.split(".").at(-1))) {
          formatData.append("files", item.raw);
        } else {
          bool = true;
        }
      });
      formatData.append("libraryId", this.userknowId);
      if (bool) {
        this.$message.error("仅支持后缀名为docx、pdf、txt类型文件");
        return;
      }
      // formatData.append("knowledge_base_name", this.userknowledge);
      // let arr = this.fileList.map((v) => v.name);
      // console.log(arr);
      // let
      uploadDocsJava(formatData)
        .then((result) => {
          this.$message.success(result.msg);
          this.$emit("uploadFun");
          console.log(result);
        })
        .catch((err) => {});
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
      console.log(file, fileList);
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    handelPreview(file) {
      let blob = new Blob([file]);
      let objectUrl = URL.createObjectURL(blob); // 创建URL
      downLoad(file.name, objectUrl);
    },
  },
};
</script>
<style lang="scss" scoped>
.upload {
  width: 100%;
  height: 100%;
  ::v-deep .upload-demo {
    width: 100%;
    padding: 10px 0px;
    max-height: calc(100% - 50px);
    .el-upload-list {
      text-align: left;
      padding-left: 30px;
      min-height: 50px;
      max-height: 160px;
      overflow: auto;
    }
  }
  .btn {
    margin-top: 0px;
  }
}
</style>
